<template>
	<view
		class="module-wrap u-empty"
		v-if="show"
		:style="{
			height: height,
			marginTop: marginTop + 'rpx',
			paddingTop: paddingTop + 'rpx',
		}"
	>
		<view class="empty-wrap">
			<cl-image
				:src="`/static/img/empty/${type}.png`"
				mode="widthFix"
				:size="size"
				:minHeight="`${size[0]}rpx`"
			></cl-image>
			<view class="empty-wrap_text" :style="{ fontSize, color }">
				<slot>
					<text>{{ text }}</text>
				</slot>
			</view>
		</view>
		<view class="u-slot-wrap">
			<slot name="bottom"></slot>
		</view>
	</view>
</template>

<script>
/**
 * empty 内容为空
 * @description 该组件用于需要加载内容，但是加载的第一页数据就为空，提示一个"没有内容"的场景， 我们精心挑选了十几个场景的图标，方便您使用。
 * @property {String} color 文字颜色（默认#c0c4cc）
 * @property {String} text 文字提示（默认“无内容”）
 * @property {String Number} font-size 提示文字的大小，单位rpx（默认28）
 * @property {String Number} margin-top 组件距离上一个元素之间的距离（默认0）
 * @property {Boolean} show 是否显示组件（默认true）
 */

export default {
	name: "empty",
	props: {
		// 提示文字
		text: {
			type: String,
			default: "",
		},
		// 文字颜色
		color: {
			type: String,
			default: "#666",
		},
		// 文字大小，单位rpx
		fontSize: {
			type: [String, Number],
			default: 26,
		},
		// 图标的颜色
		// iconColor: {
		// 	type: String,
		// 	default: "#c0c4cc",
		// },
		// // 图标的大小
		// iconSize: {
		// 	type: [String, Number],
		// 	default: 100,
		// },
		// 是否显示组件
		show: {
			type: Boolean,
			default: true,
		},
		// 组件距离上一个元素之间的距离
		marginTop: {
			type: [String, Number],
			default: 0,
		},
		paddingTop: {
			type: [String, Number],
			default: 120,
		},
		height: {
			type: [String, Number],
			default: '100%',
		},
		// 图标类型
		type: {
			type: [String, Number],
			default: 2,
		},
		size: {
			type: Array,
			default: () => {
				return [600, 600]
			}
		},
	},
};
</script>

<style scoped lang="scss">
// 定义混入指令，用于在非nvue环境下的flex定义，因为nvue没有display属性，会报错
@mixin vue-flex($direction: row) {
	/* #ifndef APP-NVUE */
	display: flex;
	flex-direction: $direction;
	/* #endif */
}

.u-empty {
	@include vue-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    min-height: 500rpx;
}

.u-slot-wrap {
	@include vue-flex;
	justify-content: center;
	align-items: center;
	margin-top: 20rpx;
}

.empty-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
    &_text {
        text-align: center;
        margin-top: 20rpx;
		font-size: 28rpx;
		color: $color-sub;
    }
}
</style>
